<template>
  <div class="orderDom">
    <el-dialog title="审核" :visible.sync="dialogExamine" width="30%">
      <el-form :inline="true" :model="currentRow" class="demo-form-inline-box">
        <el-form-item label="IP地址">
          {{ currentRow.ipaddr }}
        </el-form-item>
        <el-form-item label="端口号">
          {{ currentRow.protno }}
        </el-form-item>
        <el-form-item label="账号">
          {{ currentRow.account }}
        </el-form-item>
        <el-form-item label="密码">
          {{ currentRow.password }}
        </el-form-item>
        <br />
        <el-form-item label="路径">
          {{ currentRow.url }}
        </el-form-item>
        <el-form-item label="结束时间">
          {{ currentRow.endtime }}
        </el-form-item>
        <el-form-item label="定制时长">
          {{ currentRow.datelong }}
        </el-form-item>
        <br />
        <el-form-item label="数据资源名称">
          {{ currentRow.filename }}
        </el-form-item>
        <el-form-item label="cron表达式">
          {{ currentRow.cron }}
        </el-form-item>
      </el-form>
      <div class="dialog-border"></div>
      <el-form :model="formIsexamine" class="demo-form-mini">
        <el-form-item label="">
          <el-radio-group
            class="radio-isexamine"
            v-model="formIsexamine.isexamine"
          >
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="formIsexamine.examineview"
            maxlength="500"
            show-word-limit
            rows="5"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogExamine = false">取 消</el-button>
        <el-button type="primary" @click="handleExamine">提 交</el-button>
      </span>
    </el-dialog>
    <el-dialog title="文件列表" :visible.sync="dialogDownload" width="60%">
      <!-- <el-form :inline="true" :model="currentRow" class="demo-form-inline-box">
        <el-form-item label="IP地址">
          {{ currentRow.ipaddr }}
        </el-form-item>
        <el-form-item label="端口号">
          {{ currentRow.protno }}
        </el-form-item>
        <el-form-item label="路径">
          {{ currentRow.url }}
        </el-form-item>
        <br />
        <el-form-item label="账号">
          {{ currentRow.account }}
        </el-form-item>
        <el-form-item label="密码">
          {{ currentRow.password }}
        </el-form-item>
      </el-form> -->
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="50"> </el-table-column>
        <el-table-column prop="no" label="订单编号"> </el-table-column>
        <el-table-column prop="filename" label="数据资源名称">
        </el-table-column>
        <el-table-column v-if="isadmin" prop="username" label="用户">
        </el-table-column>

        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="handleCopy(scope.row)"
              size="small"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDownload = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="handleCopy">复制信息</el-button> -->
      </span>
    </el-dialog>
    <el-tabs v-model="activeName" @tab-click="handleTabsClick">
      <el-tab-pane
        :label="isadmin ? '全部订单' : '进行中订单'"
        name="orderProgress"
      ></el-tab-pane>
      <el-tab-pane
        v-if="!isadmin"
        label="历史订单"
        name="orderHistory"
      ></el-tab-pane>
      <el-tab-pane
        v-if="isadmin"
        label="未审核订单"
        name="isexamine_1"
      ></el-tab-pane>
      <el-tab-pane
        v-if="isadmin"
        label="审核通过订单"
        name="isexamine_2"
      ></el-tab-pane>
      <el-tab-pane
        v-if="isadmin"
        label="审核拒绝订单"
        name="isexamine_3"
      ></el-tab-pane>
    </el-tabs>
    <div class="formDom">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单编号">
          <el-input v-model="formInline.no" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item label="资料名称">
          <el-input
            v-model="formInline.filename"
            placeholder="资料名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableDom">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="50"> </el-table-column>
        <el-table-column prop="no" label="订单编号"> </el-table-column>
        <el-table-column prop="filename" label="数据资源名称">
        </el-table-column>
        <el-table-column v-if="isadmin" prop="username" label="用户">
        </el-table-column>
        <el-table-column prop="isexamine" label="审核状态">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.isexamine == 2
                  ? 'success'
                  : scope.row.isexamine == 1
                  ? 'warning'
                  : 'danger'
              "
              >{{
                scope.row.isexamine == 2
                  ? "审核通过"
                  : scope.row.isexamine == 1
                  ? "未审核"
                  : "审核拒绝"
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="datelong" label="定制时长"> </el-table-column>
        <el-table-column prop="state" label="订单状态">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.state == 2
                  ? 'success'
                  : scope.row.state == 1
                  ? 'warning'
                  : 'danger'
              "
              >{{
                scope.row.state == 2
                  ? "进行中"
                  : scope.row.state == 1
                  ? "未启用"
                  : "已停止"
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="endtime" label="服务结束时间"> </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              v-if="activeName == 'orderProgress' && isadmin == 1"
              @click="handleExamineShow(scope.row)"
              type="text"
              size="small"
              >审核</el-button
            >
            <el-button
              v-if="activeName == 'orderProgress' && scope.row.isexamine == 2"
              @click="handleStop(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.state == 2 ? "停止服务" : "运行服务" }}</el-button
            >
            <el-button @click="handleShow(scope.row)" type="text" size="small"
              >查看定制</el-button
            >
            <el-button
              @click="handleDownload(scope.row)"
              type="text"
              size="small"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <ComPagination
      :total="total"
      :currentPage="formInline.pageNum"
      :pageSize="formInline.pageSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></ComPagination>
    <!-- <div v-show="activeName == 'orderProgress'"></div>
    <div v-show="activeName == 'orderHistory'"></div> -->
  </div>
</template>

<script>
import ComPagination from "@/components/comPagination.vue";
export default {
  components: {
    ComPagination,
  },
  data() {
    return {
      tableLoading: false,
      dialogDownload: false,
      dialogExamine: false,
      activeName: "orderProgress",
      total: 0,
      userid: 1,
      isadmin: 1,
      currentRow: {},
      formInline: {
        no: "",
        filename: "",
        isexamine: 0,
        pageNum: 1,
        pageSize: 10,
      },
      formIsexamine: { examineview: "", isexamine: 1 },
      tableData: [
        {
          id: "234324320191892",
          date: "一个月",
          time: "2016-05-02",
          name: "全球argo浮标观测资料",
          type: "通过",
        },
        {
          id: "234324320191893",
          date: "一年",
          time: "2023-01-01",
          name: "全国地名数据",
          type: "通过",
        },
        {
          id: "234324320191895",
          date: "一个月",
          time: "2022-09-01",
          name: "全国影像图",
          type: "通过",
        },
        {
          id: "234324320191896",
          date: "一个月",
          time: "2018-02-12",
          name: "全国省达组网拼图",
          type: "待审核",
        },
      ],
      fileList: [],
    };
  },
  created() {
    this.onSearch();
  },
  methods: {
    onSearch() {
      let req = {
        filename: this.formInline.filename,
        no: this.formInline.no,
        pageNum: this.formInline.pageNum,
        pageSize: this.formInline.pageSize,
        isexamine: this.formInline.isexamine,
        type: 2,
        userid: this.userid,
      };
      if (this.isadmin) {
        req.type = 0;
      } else {
        if (this.activeName == "orderProgress") {
          req.type = 1;
        }
        req.isexamine = 0;
      }
      this.tableLoading = true;
      this.tableData = [];
      this.$http
        .post(`/fileSubscribe/list`, req)
        .then((res) => {
          this.tableLoading = false;
          if (res.code == 200) {
            this.tableData = res.data.records || [];
            this.total = res.data.total || 0;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          this.$message.error(err.message);
        });
    },
    onReset() {
      this.formInline = {
        no: "",
        filename: "",
        isexamine: 0,
        pageNum: 1,
        pageSize: 10,
      };
    },
    handleTabsClick(tab, event) {
      console.log(tab, event);
      if (this.activeName == "isexamine_1") {
        this.formInline.isexamine = 1;
      } else if (this.activeName == "isexamine_2") {
        this.formInline.isexamine = 2;
      } else if (this.activeName == "isexamine_3") {
        this.formInline.isexamine = 3;
      } else {
        this.formInline.isexamine = 0;
      }
      this.onSearch();
    },
    handleStop(row) {
      let type = "1";
      if (row.state == "1") {
        type = "2";
      }
      let req = {
        id: row.id,
        state: type,
      };
      this.$http
        .post(`/fileSubscribe/update`, req)
        .then((res) => {
          if (res.code == 200) {
            this.onSearch();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    handleShow(row) {},
    handleDownload(row) {
      this.currentRow = row;
      this.fileList = [];
      this.dialogDownload = true;
    },
    handleCopy() {
      let text =
        this.currentRow.ipaddr +
        " " +
        this.currentRow.protno +
        " " +
        this.currentRow.url +
        " " +
        this.currentRow.account +
        " " +
        this.currentRow.password;
      try {
        var textarea = document.createElement("textarea");
        textarea.style.position = "fixed";
        textarea.style.opacity = 0;
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
        //  navigator.clipboard.writeText(txt);
        this.$message.success("复制成功");
      } catch (error) {
        this.$message.error("复制失败");
      }
    },
    handleExamineShow(row) {
      this.currentRow = row;
      this.dialogExamine = true;
      return;
      this.$http
        .post(`/fileSubscribe/info?id=` + row.id)
        .then((res) => {
          if (res.code == 200) {
            // this.dialogExamine = true;
            this.orderInfo = JSON.parse(res.data.jsonDate);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          this.$message.error(err.message);
        });
    },
    handleExamine() {
      let req = {
        examineview: this.formIsexamine.examineview,
        id: this.currentRow.id,
        isexamine: this.formIsexamine.isexamine,
      };
      this.$http
        .post(`/fileSubscribe/update/examine`, req)
        .then((res) => {
          if (res.code == 200) {
            this.dialogExamine = false;
            this.onSearch();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    handleCurrentChange(page) {
      this.formInline.pageNum = page;
      this.onSearch();
    },
    handleSizeChange(size) {
      this.formInline.pageSize = size;
      this.onSearch();
    },
  },
};
</script>

<style lang="scss" scoped>
.orderDom {
  ::v-deep .el-dialog__wrapper {
    .el-dialog__header {
      background-image: linear-gradient(
        to right,
        #89b7fb,
        #b1c7fc,
        #d1d8fc,
        #ebebfd,
        #ffffff
      );
    }
    .dialog-border {
      border-top: 2px solid #409eff;
      margin-bottom: 10px;
    }
    .dialog-footer {
    }
  }
  ::v-deep .demo-form-inline-box {
    background-color: #f8f8f8;
    padding: 10px 10px 0 10px;
    font-size: 16px;
    .el-form-item__label {
      font-weight: bold;
      color: dodgerblue;
    }
  }
  ::v-deep .demo-form-mini {
    .el-form-item {
      margin-bottom: 0 !important;
    }
    .el-form-item__label {
      font-weight: bold;
    }
    .radio-isexamine {
      .el-radio__inner {
        border: 1px solid dodgerblue;
      }
      .el-radio__label {
        font-size: 16px;
        color: #000;
      }
    }
  }
}
</style>
